<template>
    <Layout>
        <Header class="header">
            <i-col span="4" offset="1">
                <img src="../assets/iview.png" alt="logo" class="logo">
            </i-col>
            <i-col span="14">
                <Menu mode="horizontal" :active-name="$route.path" on-select>
                    <Menu-Item name="app" to="app">
                        <Icon type="ios-stats"></Icon>
                        数据分析
                    </Menu-Item>
                    <Menu-Item name="purchase" to="purchase">
                        <Icon type="ios-clipboard"></Icon>
                        采购管理
                    </Menu-Item>
                    <Menu-Item name="sales" to="sales">
                        <Icon type="ios-list-box" />
                        销售管理
                    </Menu-Item>
                    <Menu-Item name="AllProduct" to="AllProduct">
                        <Icon type="ios-grid"></Icon>
                        库存管理
                    </Menu-Item>

                </Menu>
            </i-col>
            <i-col span="5">

                <Button type="error" @click="modal2 = true">退出</Button>
                <Modal v-model="modal2" width="360">
                    <p slot="header" style="color:#ff3300;text-align:center">
                        <span>退出登录</span>
                    </p>
                    <div style="text-align:center">
                        <p>退出登录后需要重新登录</p>
                        <p>是否继续删除？</p>
                    </div>
                    <div slot="footer">
                        <Button type="error" :loading="modal_loading" @click="handleLogOut()">退出</Button>
                    </div>
                </Modal>
            </i-col>

        </Header>

        <Layout>
            <Sider class="sider" width="180" v-model="isCollapsed" :class="{'sider-hide': isCollapsed}">
                <Menu class="sider-menu" theme="dark">
                    <Menu-Item name="1">
                        <Icon type="ios-paper"></Icon>
                        <span>人员管理</span>
                    </Menu-Item>
                    <Menu-Item name="2">
                        <Icon type="ios-paper"></Icon>
                        <span>客户管理</span>
                    </Menu-Item>
                    <Menu-Item name="3">
                        <Icon type="ios-paper"></Icon>
                        <span>信息管理</span>
                    </Menu-Item>

                </Menu>
            </Sider>

            <Content class="content" :class="{'content-expend':isCollapsed}">
                <slot></slot>
            </Content>
        </Layout>
    </Layout>
</template>

<script>
    import { mapMutations } from 'vuex'
    export default {
        name: 'Home',

        data() {
            return {
                modal2: false,
                modal_loading: false,
                isCollapsed: false,
            };
        },

        mounted() {

        },

        methods: {
            ...mapMutations(["LOGOUT"]),
            handleLogOut() {
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    if (!this.LOGOUT()) {
                        this.$Message.success('退出成功!');
                        this.$router.push('/login');
                    } else {
                        this.$Message.error('退出失败!');

                    }
                }, 1000);
            }
        },

    };
</script>

<style scoped>
    .header {
        width: 100%;
        height: 60px;
        background-color: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .logo {
        height: 50px;
        margin-top: 5px;
    }

    .sider {
        position: fixed;
        height: 100%;
        left: 0;
        overflow: auto;
        z-index: 1;
    }

    .sider-menu {
        margin-top: 60px;
    }

    .sider-hide .ivu-menu-item span {
        display: none;
    }

    .content {
        margin-left: 180px;
        margin-top: 60px;
        padding: 16px;
        transition: all .2s ease-in-out;
    }

    .content-expand {
        margin-left: 64px;
    }
</style>